<template>
  <div class="view">
    <!-- :style="{height: viewHeight+'px'}" -->
    <!--<div class="view-title">
      <span class="txt tab-title"
            :class="{pos: tabIndex === index}"
            @click="changeTab(index)"
            v-for="(tab,index) in tabs">{{tab}}</span>
    </div>-->
    <div class="container" v-if="tabIndex === 0">
      <div class="left-area" style="width: 48%">
        <role-list @role-select="roleToAuth"></role-list>
      </div>

      <div class="right-area" style="width: 50%">
        <div class="description">分配角色权限</div>
        <auth-tree
          ref="roleToAuthTree"
          :can-set="true"
          @auth-submit="roleToAuthSubmit"
          @auth-reset="roleToAuth(roleSelect)"
          :check-strictly='true'
        ></auth-tree>
      </div>
    </div>
    <div class="container" v-if="tabIndex === 1">
      <div class="left-area" style="width: 28%">
        <user-organ-tree @user-select="userToRole"></user-organ-tree>
      </div>
      <div class="right-area" style="width: 70%">
        <div class="description">分配角色权限</div>
        <role-list
          ref="userToRoleList"
          :can-set="true"
          @role-submit="userToRoleSubmit"
          @role-reset="userToRole(userSelect)"
        ></role-list>
      </div>
    </div>
    <div class="container" v-if="tabIndex === 2">
      <div class="left-area" style="width: 48%">
        <role-list @role-select="roleToUser"></role-list>
      </div>
      <div class="right-area" style="width: 50%">
        <div class="description">分配人员</div>
        <user-organ-tree
          ref="roleToUserTree"
          :can-set="true"
          @user-submit="roleToUserSubmit"
          @user-reset="roleToUser(roleSelect)"
        ></user-organ-tree>
      </div>
    </div>
    <div class="container" v-if="tabIndex === 3">
      <div class="left-area" style="width: 28%">
        <auth-tree @auth-select="authToRole"></auth-tree>
      </div>
      <div class="right-area" style="width: 70%">
        <div class="description">分配角色</div>
        <role-list
          ref="authToRoleList"
          :can-set="true"
          @role-submit="authToRoleSubmit"
          @role-reset="authToRole(authSelect)"
        ></role-list>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

import RoleList from './components/RoleList';
import AuthTree from './components/AuthTree';
import UserOrganTree from './components/UserOrganTree';

import { userRoles, setUserRole } from '@/api/system/user';
import {
  roleAuth,
  roleUser,
  setRoleAuth,
  setRoleUser,
} from '@/api/system/role';
import { authRoles, setAuthRole } from '@/api/system/authority';

export default {
  name: 'AuthManage',
  components: {
    RoleList,
    AuthTree,
    UserOrganTree,
  },
  data() {
    return {
      viewHeight: 500,
      tabs: ['角色权限管理', '人员角色管理', '角色人员管理', '权限角色管理'],
      //tabIndex: -1,
      roleData: [],
      authData: [],
      userData: [],
      organData: [],

      roleSelect: null,
      userSelect: null,
      authSelect: null,
    };
  },
  computed: {
    ...mapGetters(['dicts']),
    tabIndex() {
      let i = 0;
      try {
        i = Number(this.$route.path.split('/tab')[1]) - 1;
      } catch (e) {}
      return i;
    },
  },
  created() {
    //this.changeTab(0);
  },
  mounted() {
    // this.viewHeight =  document.body.clientHeight - 64 - 42 - 40 - 14;
  },
  methods: {
    changeTab(index) {
      this.tabIndex = index;
    },
    roleToAuth(row) {
      this.roleSelect = row;
      roleAuth(row.roleId).then((res) => {
        let roleAuthArr = res.rows.map((res) => res.authorityId);
        this.$refs.roleToAuthTree.setSelect(roleAuthArr);
      });
    },
    roleToAuthSubmit(authArr) {
      if (!this.roleSelect) {
        this.$alert('请选择一个角色');
        return;
      }
      setRoleAuth(this.roleSelect.roleId, authArr).then(this.submitSuccess);
    },
    userToRole(data) {
      this.userSelect = data;
      userRoles(data.userId).then((res) => {
        let userRolesArr = res.rows.map((res) => res.roleId);
        this.$refs.userToRoleList.setSelect(userRolesArr);
      });
    },
    userToRoleSubmit(roleArr) {
      if (!this.userSelect) {
        this.$alert('请选择一个用户');
        return;
      }
      setUserRole(this.userSelect.userId, roleArr).then(this.submitSuccess);
    },
    roleToUser(row) {
      this.roleSelect = row;
      roleUser(row.roleId).then((res) => {
        let roleUserArr = res.rows.map((res) => res.userId);
        this.$refs.roleToUserTree.setSelect(roleUserArr);
      });
    },
    roleToUserSubmit(userArr) {
      if (!this.roleSelect) {
        this.$alert('请选择一个角色');
        return;
      }
      setRoleUser(this.roleSelect.roleId, userArr).then(this.submitSuccess);
    },
    authToRole(data) {
      this.authSelect = data;
      authRoles(data.authorityId).then((res) => {
        let authRoleArr = res.rows.map((res) => res.roleId);
        this.$refs.authToRoleList.setSelect(authRoleArr);
      });
    },
    authToRoleSubmit(roleArr) {
      if (!this.authSelect) {
        this.$alert('请选择一个权限');
        return;
      }
      setAuthRole(this.authSelect.authorityId, roleArr).then(
        this.submitSuccess
      );
    },
    submitSuccess() {
      this.$message.success('修改成功');
    },
  },
};
</script>

<style scoped lang="scss">
@import '~@/styles/variables.scss';
@import '~@/styles/mixin.scss';

.view {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .container {
    display: flex;
    align-items: stretch;
    flex-direction: row;
    width: 100%;
    flex: 1;
    overflow: hidden;
    .right-area,
    .left-area {
      height: 100%;
      padding: 16px;
      background-color: #fff;
      @include noScrollBar();
    }
    .right-area {
      margin-left: 2%;
      display: flex;
      flex-direction: column;
    }
  }
}

.description {
  margin: 4px;
  line-height: 30px;
  font-weight: bold;
}
</style>
